<template lang="pug">
.handdraw-menu.tstion(v-if='getMenusData && getMenusData.length' v-show='pcModel')
  .customNav
    .skin.skin1
      p.sp(v-for='(item, index) in getMenusData'
        :key='index'
        :style='{"z-index": zIndex-index}'
        @click.stop='openitem(item, index)')
        span.txt.omit {{item.name}}

</template>

<script>
import { mapGetters } from 'vuex'
import { DeepCloneData, sortId, isPc } from '@/utils'

export default {
  data() {
    return {
      zIndex: 100,
      pcModel: isPc(),
    }
  },
  computed: {
    ...mapGetters(['handdrawData']),
    getMenusData() {
      if (this.handdrawData && this.handdrawData.overview_menu_items) {
        let menusArr = this.handdrawData.overview_menu_items.menus
        if (!menusArr) {
          // 空数据返回
          return []
        }
        return menusArr
      } else {
        return []
      }
    }
  },
  methods: {
    // 展开菜单弹框
    openitem(item) {
      // console.log(item)
      if (!item) return
      let contents = [], obj = []
      let tempItem = DeepCloneData(item)
      if (tempItem.children && tempItem.children.length > 0) {
        tempItem.children.map(temp => {
          if (temp.contents) {
            contents = JSON.parse(temp.contents)
            if (contents.length > 0) {
              contents.sort(sortId)
            }
          }
          temp.newData = contents
          temp.title = temp.name
        })
        obj = tempItem.children
      } else {
        if (tempItem.contents) {
          contents = JSON.parse(tempItem.contents)
          if (contents.length > 0) {
            contents.sort(sortId)
          }
        }
        tempItem.newData = contents
        tempItem.title = tempItem.name
        obj = [tempItem]
      }

      this.$vgo.emit('dialog:mutil', {
        data: obj,
        biaoji: 1,
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.tstion
  transition: all .5s ease-in-out

.handdraw-menu
  position: fixed
  top: 20px
  right: 78px
  z-index: 101

  .customNav
    width: 100%

    .skin
      display: flex
      position: relative
      text-align: center

      .sp
        flex: 1
        position: relative
        z-index: 0
        height: 50px
        line-height: 50px
        padding: 0 20px
        font-size: 10px
        white-space: nowrap
        box-sizing: border-box

        .txt
          padding: 0
          color: #fff
          cursor: pointer
          display: block
          width: 100%

    .skin1
      margin-right: 20px

      .sp
        width: 100px
        line-height: 42px
        padding: 0 0 0 30px
        color: #fff
        background-image: url(/static/images/handdraw/1_2.png)
        background-repeat: no-repeat
        background-size: 100% 100%

        &:hover
          color: #333

        &:first-child
          background-image: url(/static/images/handdraw/1_1.png)

        &:last-child:before
          content: ''
          position: absolute
          right: -33px
          top: 0
          z-index: 2
          height: 100%
          width: 40px
          background-image: url(/static/images/handdraw/1_3.png)
          background-size: 100% auto
</style>